.container {
    position: fixed;

    width: calc(100% - 100px);
    max-width: 1200px;
 
    left: 50%;
    transform: translate(-50%);
    top: 29px;
    
    height: 43.64px;
  
    z-index:8;
   
   
    
  }


  .cursor {

    position: fixed;
    
    z-index: 99;
    width:100%;
    height: 28.5px;
    
  }


  .cursor2 {

    position: fixed;
    
    z-index: 99;
    width:100%;
    top: calc(43.5px + 43.64px - 15px);
    height: 43.5px;
   

  }
  
  
  
  
  #interactiveText {
    
    font-family: 'SuisseP',Arial, Helvetica, sans-serif !important;
    position: fixed;
    font-weight: 400;
  
   
    width: calc(100% - 100px);
    max-width: 1200px;
 
    left: 50%;
    transform: translate(-50%);
   
    overflow: hidden;
   
   
    margin-left: 0px;
    margin-top: -36px;
    height: 130px;
    
    font-size: 12px;
  
    letter-spacing:4px; /* Hier können Sie den gewünschten Abstand einstellen */
  
    display: flex;
    
    align-items: baseline; /*Buchstaben unten auf einer Linie*/
    
    z-index: 8;
    
  }


  
  #interactiveText span:nth-child(11) { 

    margin-left: 25px; /* Leerzeichen zwischen parametric und engineering */

  }

  
  
  #interactiveText span { 
    
    z-index: 6;
    
    cursor: crosshair;
  
    padding-top: 50px; /* Ermgölicht einen größeren Einzugsbereich um die Größe der Buchstaben zu kontrolieren   */
    padding-bottom: 50px;
  
    
    transition: 0.3s; /* Dauer wie schnell Buchstaben die größe ändern */
  
  }

  #noclicking a:hover {

    cursor:default;

  }


  #noclicking a:active {

    pointer-events: none !important;
    

  }
  

  #interactiveText span:first-child {
  
    transition: 0s; /* Damit der erste Buchstabe nicht verzögert eingebeldnet wird */
    font-size: 60px !important;
    
    pointer-events: auto !important;
        
  }

  
  #interactiveText span:first-child:hover {
  
    cursor: pointer;
    
  }
  
  
  .revealed {
  
    opacity: 1;
   
   
  }

  
  .hidden {

    opacity: 0;
    transition: 2s !important; /*Dauer wie schnell Buchstaben ausgeblendet werden wenn Maus außerhab Header*/
 
  }

  

  
  
  

  
  
  /********** Range Input Styles **********/
  /*Range Reset*/
  input[type="range"] {

    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: ns-resize;
    transform: rotateZ(-90deg);
    pointer-events: none;

    position: fixed;
    left: -41.5px;
    width: 75px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0);
    top: 16px;
    visibility: hidden;
    z-index: 7; /*Damit der Slider über dem img ist*/

  }
  
  
  /***** Chrome, Safari, Opera and Edge Chromium styles *****/
  /* slider track */
  input[type="range"]::-webkit-slider-runnable-track {
    
    visibility: hidden;
    
  }
  
  /* slider thumb */
  input[type="range"]::-webkit-slider-thumb {

   -webkit-appearance: none; /* Override default look */
   
    /*custom styles*/
    background-color: #00000000;
    height: 30px;
    width: 30px;
    outline-style: none;
    outline-width: 1px;
    outline-color: black;
    border-radius: 0;
  
    background-image: url('/img/thumbgrössergleichsuisse.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment:scroll;
  
    visibility: visible;
    z-index: 7; /*Damit der Slider über dem img ist*/

  }

  
  /******** Firefox styles ********/
  /* slider track */
  input[type="range"]::-moz-range-track {

    visibility: hidden;

  }
  
  /* slider thumb */
  input[type="range"]::-moz-range-thumb {

    border: none; /*Removes extra border that FF applies*/
    
    background-color: #00000000;
    height: 30px;
    width: 30px;
    outline-style: none;
    outline-width: 1px;
    outline-color: black;
    border-radius: 0;
  
    background-image: url('/img/thumbgrössergleichsuisse.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment:scroll;
  
    visibility: visible;
  
  }
  
  
  
  
  @media (hover: none) {
  
    input[type="range"]::-webkit-slider-thumb {

        -webkit-appearance: none; /* Override default look */
        
        /*custom styles*/
        border: none; /*Removes extra border that FF applies*/
      
        background-color: #00000000;
        height: 30px;
        width: 30px;
        outline-style: none;
        outline-width: 1px;
        outline-color: black;
        border-radius: 0;
        box-shadow: none;
      
        background-image: url('/img/thumbgrössergleichsuisse.png');
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment:scroll;
      
        visibility: visible;
    
     }


     .noclicking a { /*Hierdurch können die Buchstaben auf Touchgeraäten nicht eingelbendet werden. Das P bleibt immer zu sehen.*/
  
        pointer-events: none;
       
     }

  }



  /******* KLEINERER ABSTAND ZU SEITE BEI GERINGER SEITENBREITE *******/

@media (max-width: 500px) {

  .container {
    
    width: calc(100% - 60px);
    max-width: 1200px;

  }

  #interactiveText {
  
    width: calc(100% - 60px);
    max-width: 1200px;

  }
  

}